<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <ul class="list">
            123123
            <li class="first">1</li>
            <li>2</li>
            <li class="mid">3</li>
            <li>4</li>
            <li>5</li>
            <li class="last">6</li>
            <!-- 456456 -->
        </ul>
    </div>
</body>
<script>
    // 节点
    // 文档节点  元素节点 属性节点 文本节点 注释节点

    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];

    // 层级关系  (节点层级关系查找 / 元素层级关系查找)
    // 父节点  父元素
    // Element.parentNode  父节点
    // Element.parentElement   父元素

    // console.log(ul.parentNode);
    // console.log(ul.parentElement);

    // console.log(ul.parentNode.parentNode);
    // console.log(ul.parentNode.parentNode.parentNode);
    // console.log(ul.parentNode.parentNode.parentNode.parentNode);

    // 子节点  子元素
    // Element.childNodes   子节点
    // Element.children     子元素
    console.log(ul.childNodes);
    console.log(ul.children);

    // 第一个子节点/子元素
    // Element.firstChild   第一个子节点
    // Element.firstElementChild     第一个子元素

    // console.log(ul.firstChild,typeof ul.firstChild);
    // console.log(ul.firstElementChild);

    // 最后一个子节点/子元素
    // Element.lastChild   最后一个子节点
    // Element.lastElementChild     最后一个子元素

    // console.log(ul.lastChild,typeof ul.lastChild);
    // console.log(ul.lastElementChild);




    // 同胞节点     

    // 前一个 同胞节点/同级元素     previous早先的 先前的   Sibling同胞 兄弟 姐妹
    // Element.previousSibling
    // Element.previousElementSibling

    // console.log(mid.previousSibling);
    // console.log(mid.previousElementSibling);


     // 后一个 同胞节点/同级元素     
    // Element.nextSibling
    // Element.nextElementSibling

    // console.log(mid.nextSibling);
    // console.log(mid.nextElementSibling);





</script>

</html>